<template>
	<view style="height: 100%;" >
		<!--pages/shop_new/shopType/shopType.wxml-->
		<view class="wrapper"  :style="'padding-top:' + headerRect.height + 'px;'" >
			<!-- 固定顶部 -->
			<view id="header" style="position:fixed;top:0;left0;z-index:999;width:100%;">
				<view class="search-wrapper" :style="'background:' + mobile_head_color">
					<navigator class="search-box" hover-class="search-hover" url="/pages/shop_new/search/search">
						<text class="iconfont icon-sousuo"></text>
						<lang keywords="请输入商家、商品名称"></lang>
					</navigator>
					<navigator v-if="showScan" class="scan" url="/pages/shop_new/scanBuy/scanBuy?showPage=true">
						<text class="iconfont icon-scan"></text>
						<view>
							<lang keywords="扫码购"></lang>
						</view>
					</navigator>
				</view>
				<view class="filter-box">
					<view class="filter border-b">
						<view class="type-item" :style="filterTag === 'allType' ? 'color:' + mobile_head_color + ';font-weight: bold;' : ''" @click.stop="openMask($event)" data-tag="allType">{{filterParam.cat.cat_name}}
							<text :class="'iconfont ' + (showMask && filterTag === 'allType' ? 'icon-jiantou1' : 'icon-xiala')"></text>
						</view>
						<view class="type-item" :style="filterTag === 'sort' ? 'color:' + mobile_head_color + ';font-weight: bold;' : ''" @click.stop="openMask($event)" data-tag="sort">{{filterParam.sort.name}}
							<text :class="'iconfont ' + (showMask && filterTag === 'sort' ? 'icon-jiantou1' : 'icon-xiala')"></text>
						</view>
						<view class="type-item dispatch" :style="filterTag === 'dispatch' ? 'color:' + mobile_head_color + ';font-weight: bold;' : ''" @click.stop="openMask($event)" data-tag="dispatch">
							<lang keywords="筛选"></lang>
							<view class="block-in num-box" v-if="multipleDiscountNum > 0">
								<view class="block-in left" :style="'background:' + mobile_head_color"></view>
								<view class="block-in right" :style="'color:' + mobile_head_color">{{ multipleDiscountNum }}</view>
							</view>
							<text :class="'iconfont ' + (showMask && filterTag === 'dispatch' ? 'icon-jiantou1' : 'icon-xiala')"></text>
						</view>
					</view>
				</view>
			</view>


			<scroll-view style="height:100%;" scroll-y="true" :scroll-top="scrollTop" lower-threshold="10"
			 @scrolltolower="scrollToBottom" :enable-back-to-top="true">
				<view>
					<view class="list shop-list ">
						<view id="listContent">
							<!-- <shopItem class="item border-b" v-for="(shop, index) in shopList" :key="shop.store_id" :shop="shop" 
									:cartNum="store_num[shop.store_id] ? store_num[shop.store_id] : '0' "></shopItem>
									 -->
							<view class="m-t-list-list">
								<view v-if="!shopList.length" class="m-t-list-empty">暂无数据</view>
								<navigator v-else class="m-t-list-item" v-for="(item, index) in shopList" :key="index" :url="'../takeout-sub/takeout-sub?store_id=' + item.store_id">
									<view class="m-t-list-item-pic"><image mode="aspectFill" :src="item.image"></image></view>
									<view class="m-t-list-item-info">
										<view class="m-t-list-item-title">{{ item.name }}</view>
										<view class="m-t-list-item-one">
											<view class="m-t-list-item-one-left">
												<text class="m-t-list-item-one-score">{{ item.star }}分</text>
												<text>月售{{ item.month_sale_count }}</text>
											</view>
											<view class="m-t-list-item-one-right">
												<text class="m-t-list-item-one-time">{{ item.delivery_time }}分钟</text>
												<text>{{ item.range }}</text>
											</view>
										</view>
										<view class="m-t-list-item-two">
											<text>起送{{ item.delivery_price }} |</text>
											<text>配送{{ item.delivery_money }}</text>
											<!-- <text>人均￥27</text> -->
										</view>
										<view class="m-t-list-item-three">
											<text>{{ item.deliver_name }}</text>
											<!-- <text>水煮鱼不错，很好吃</text> -->
										</view>
										<view class="m-t-list-item-four" v-for="(subitem, idx) in item.coupon_list" :key="idx">
											<text>{{ subitem.text }}</text>
										</view>
									</view>
								</navigator>
							</view>		
					 
						</view>
					</view>

					<view class="tip" v-if="pageLoading">
						<lang keywords="加载中"></lang>
					</view>

					<view class="tip" v-if="!pageLoading">
						<lang keywords="我也是有底线的···"></lang>
					</view>
				</view>

			</scroll-view>

			<!-- 购物车 -->
			<navigator class="shopCart" hover-class="hover" url="/pages/shop_new/cart/cart">
				<text class="iconfont icon-gouwuche" :style="'color:' + mobile_head_color + ';'"></text>
				<view class="num" :hidden="totalNum === 0">{{totalNum}}</view>
			</navigator>

		</view>


		<view :class="'mask ' + (showMask ? 'active' : '')" @click.stop="closeMask" v-if="shop_type">
			<view :class="'mask-content ' + (showMask ? 'active' : '')" :style="'padding-top:' + headerRect.height + 'px'">
				<!-- 全部分类 -->
				<view class="all-type" v-if="filterTag == 'allType'">
					<scroll-view class="nav-box" style="height:270px;" scroll-y="true">
						<view class="nav">
							<view :style="category_fir_index == index ? 'color:' + mobile_head_color : ''" v-for="(item, index) in shop_type.category_list"
							 :key="index" @click.stop="selectType($event)" :data-index="index" data-name="category_fir_index">
								<text>{{item.cat_name}} </text>
								<text class="iconfont icon-jiantou" v-if="item.son_list && item.son_list.length > 0"></text>
							</view>
						</view>
					</scroll-view>

					<scroll-view class="content-box" style="height:270px;" scroll-y="true">
						<view class="content" v-if="shop_type.category_list[category_fir_index]">
							<view :style="item.active ? 'color:' + mobile_head_color : ''" v-for="(item, index) in shop_type.category_list[category_fir_index].son_list"
							 :key="index" @click.stop="selectSecType($event)" :data-index="index">
								<block v-if="index === 0">
									<lang keywords="全部"></lang>
								</block>
								<text v-else>{{item.cat_name}}</text>
							</view>
						</view>
					</scroll-view>
				</view>

				<!-- 智能排序 -->
				<view class="sort" v-if="filterTag == 'sort'">
					<view v-for="(item, index) in shop_type.sort_list" :key="index" @click.stop="selectType($event)" :data-index="index"
					 data-name="sortIndex" :style="'color: ' + (sortIndex == index ? mobile_head_color : '')">
						<text>{{item.name}}</text>
						<text class="iconfont icon-dui" :hidden="sortIndex !== index"></text>
					</view>
				</view>

				<!-- 配送类型 -->
				<view class="dispatch" v-if="filterTag == 'dispatch'" @click.stop="preventDefault">
					<view class="sort-type-box" v-if="shop_type.type_list.length > 0">
						<view class="sort-type-title">{{ shop_type.type_list_title }}</view>
						<view class="sort-type-list">
							<view class="item" v-for="item in shop_type.type_list" :key="item.type_url" @click="selectTypeMultiple(item.type_url, 'delivery')">
								<text class="left" :style="multipleFilterNew[item.type_url] ? 'background:' + mobile_head_color : ''"></text>
								<text class="right" :style="multipleFilterNew[item.type_url] ? 'color:' + mobile_head_color + ';font-weight: bold;' : ''">{{ item.name }}</text>
							</view>
						</view>
					</view>
					<view class="sort-type-box" v-if="shop_type.special_list.length > 0">
						<view class="sort-type-title">{{ shop_type.special_list_title }}</view>
						<view class="sort-type-list">
							<view class="item" v-for="item in shop_type.special_list" :key="item.special_url" @click="selectTypeMultiple(item.special_url, 'discount')">
								<text class="left" :style="multipleFilterNew[item.special_url] ? 'background:' + mobile_head_color : ''"></text>
								<text class="right" :style="multipleFilterNew[item.special_url] ? 'color:' + mobile_head_color + ';font-weight: bold;' : ''">{{ item.name }}</text>
							</view>
						</view>
					</view>
					<view class="sort-btn-box">
						<view class="btn left resetFilter" @click="resetFilter"><lang keywords="重置"></lang></view>
						<view class="btn right confirmFilter" :style="'background:' + mobile_head_color" @click="confirmFilter">
							<lang keywords="完成"></lang>
							<text class="num" v-if="multipleDiscountNumNew > 0">（<lang keywords="已选"></lang> {{multipleDiscountNumNew}}）</text>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import shopItem from '../../../appComponent/platcommon/shopItem.vue'
	import common from '../../../utils/common.js'
	var app = getApp();
	var _this;
	
	export default {
		components: {shopItem},
		data() {
			return {
				phoneInfo: '',
				// 手机型号、尺寸等数据
				imageHeight: {
					logo: {}
				},
				scrollTop: '',
				scrollY: true,
				showMask: false,
				filterTag: 'allType',
				category_fir_index: 0,
				category_fir_index_old: 0,
				// 筛选分类一级菜单index
				category_sec_index: 0,
				// 筛选分类二级菜单index
				dispatch_index: 0,
				// 配送类型index
				sortIndex: 0,
				lng: '',
				// 经度
				lat: '',
				// 纬度 
				filterParam: {
					cat: {},
					// 分类
					sort: {},
					// 排序
					dispatch: {
						['type_url']: '',
						['special_url']: ''
					} // 配送类型
				},
				shopList: [],
				// 店铺列表
				pageIndex: 1,
				pageLoading: true,
				reachBottom: false,
				headerRect: {},
				// 头部高度
				delivery_address: '',
				// 当前选择的地址
				shop_type: {
					category_list: [],
					sort_list: [],
					type_list: [],
					special_list: []
				},
				// 店铺分类列表
				options: '',
				// 页面跳转带来的参数
				store_num: '',
				totalNum: 0,
				mobile_head_color: '', // 主颜色
				showScan: false, // 是否显示扫码购
				multipleDiscountNum: 0,
				multipleFilter: {},
				multipleDiscountNumNew: 0,
				multipleFilterNew: {},
				currency: '¥'
			};
		},

		onShow() {
			getCartNum()
			
			// #ifdef H5
			setWxShare();
			// #endif
		},

		// 生命周期函数--监听页面加载
		onLoad: function(options) {
			_this = this;
			_this.options = options;
			common.setMainColor(_this);

			if (options.title) {
				wx.setNavigationBarTitle({
					title: decodeURIComponent(options.title)
				});
			} else {
				wx.setNavigationBarTitle({
					title: common.changeTxt('分类页')
				});
			}

			wx.showLoading({
				title: common.changeTxt('加载中'),
				mask: true
			});
			
			// 获取设备信息及各种图片高度
			getHeight();
			var address = app.globalData.delivery_address
			if (address) {
				_this.delivery_address = address
			}
			// 请求店铺列表
			getShopList();
			
			// #ifdef MP-ALIPAY || MP-WEIXIN
			console.log('99999999999999999999999999111')
			_this.showScan = true
			// #endif
			
			common.changeCurrency(this)
		},
		methods: {
			// 阻止点击事件冒泡
			preventDefault () {},
			// 筛选完成按钮
			confirmFilter () {
				_this.multipleFilter = JSON.parse(JSON.stringify(_this.multipleFilterNew))
				_this.multipleDiscountNum = _this.multipleDiscountNumNew
				let deliveryStr = ''
				let discountStr = ''
				for (let i in _this.multipleFilter) {
					if (_this.multipleFilter[i] == 'delivery') {
						deliveryStr = deliveryStr + i + '-'
					} else {
						discountStr = discountStr + i + '-'
					}
				}
				deliveryStr = deliveryStr.slice(0, -1)
				discountStr = discountStr.slice(0, -1)
				
				_this.filterParam.dispatch = {
					['type_url']: deliveryStr,
					['special_url']: discountStr
				}
				_this.showMask = false
				_this.pageIndex = 1
				_this.pageLoading = -1
				_this.reachBottom = false
				_this.scrollTop = 0
				
				if(_this.multipleDiscountNum == 0){
					_this.filterTag = '';
				}
				
				getShopList();
			},
			// 筛选重置按钮
			resetFilter () {
				_this.multipleDiscountNumNew = 0
				_this.multipleDiscountNum = 0
				_this.multipleFilterNew = {}
			},
			selectTypeMultiple (name, type) {
				if (_this.multipleFilterNew[name]) {
					_this.$set(_this.multipleFilterNew, name, '');
					delete _this.multipleFilterNew[name]
					_this.multipleDiscountNumNew--
				} else {
					_this.$set(_this.multipleFilterNew, name, type);
					_this.multipleDiscountNumNew++
				}
				console.log('点击选择', _this.multipleFilterNew)
			},

			// 跳转到对应店铺
			goShop(e) {
				console.log(e);

				if (e.type == 'submit') {
					common.upFormid(e);
				}

				var index = e.currentTarget.dataset.index;
				var list = _this[e.currentTarget.dataset.list];
				wx.navigateTo({
					url: '/pages/shop_new/shopDetail/shopDetail?store_id=' + list[index].store_id + '&backgroundColor=' + list[index]
						.shop_fitment_color + '&frontColor=' + list[index].shop_fitment_front_color
				});
			},

			// 展开更多优惠
			showMoreSale(e) {
				var index = e.currentTarget.dataset.index;
				_this.shopList[index].showIndex = !_this.shopList[index].showIndex;
			},

			// 筛选菜单显示
			openMask(e) {
				var filterTag = e.currentTarget.dataset.tag;

				if (filterTag === _this.filterTag && _this.showMask == true) {
					_this.showMask = false;
					_this.multipleDiscountNumNew = _this.multipleDiscountNum
					_this.multipleFilterNew = JSON.parse(JSON.stringify(_this.multipleFilter))
				} else {
					_this.showMask = true;
				}

				_this.showMask = _this.showMask
				_this.filterTag = filterTag
			},

			// 筛选菜单关闭
			closeMask() {
				_this.category_fir_index = _this.category_fir_index_old
				_this.showMask = false
				_this.multipleDiscountNumNew = _this.multipleDiscountNum
				_this.multipleFilterNew = JSON.parse(JSON.stringify(_this.multipleFilter))
				
				if(_this.multipleDiscountNum == 0 && _this.filterTag === 'dispatch'){
					_this.filterTag = '';
				}
			},

			// scroll-view的滚动到底部事件
			scrollToBottom(e) {
				if (_this.pageLoading && !_this.reachBottom) {
					_this.reachBottom = true

					getShopList();
				}
			},

			// 选择一级菜单
			selectType(e) {
				var name = e.currentTarget.dataset.name;
				var index = e.currentTarget.dataset.index;
				var filterParam = JSON.parse(JSON.stringify(_this.filterParam))

				if (name == 'sortIndex') {
					_this.filterParam.sort = _this.shop_type.sort_list[index];
				}

				_this[name] = index
				_this.filterParam = _this.filterParam

				if (!_this.shop_type.category_list[index] || !_this.shop_type.category_list[index].son_list || name !=
					'category_fir_index') {
					_this.showMask = false
					_this.pageIndex = 1
					_this.pageLoading = -1
					_this.reachBottom = false
					_this.scrollTop = 0

					getShopList();
				}
				
			},

			// 选择二级菜单
			selectSecType(e) {
				var index = e.currentTarget.dataset.index;
				var list = _this.shop_type.category_list[_this.category_fir_index] ? _this.shop_type.category_list[_this.category_fir_index].son_list : null;

				if (list) {
					_this.shop_type.category_list[_this.category_fir_index_old].son_list[_this.category_sec_index].active = false
					_this.shop_type.category_list[_this.category_fir_index].son_list[index].active = true
					_this.filterParam.cat = list[index];

					_this.shop_type = _this.shop_type
					_this.showMask = false
					_this.category_fir_index_old = _this.category_fir_index
					_this.category_sec_index = index
					_this.filterParam = _this.filterParam
					_this.pageIndex = 1
					_this.pageLoading = -1
					_this.reachBottom = false
					_this.scrollTop = 0

					getShopList();
				}

				wx.setNavigationBarTitle({
					title: _this.filterParam.cat.cat_name
				});
			}
		}
	};
	// 获取设备信息及图片高度
	const getHeight = () => {
		wx.getSystemInfo({
			success: function(res) {
				// 店铺logo高
				_this.imageHeight.logo.width = res.windowWidth * 0.25;
				_this.imageHeight.logo.height = 420 * (res.windowWidth * 0.25) / 700;
	
				_this.phoneInfo = res
				_this.imageHeight = _this.imageHeight
			}
		});
	}; 
	//获取节点信息
	const getNodeInfo = (id, name) => {
		return new Promise((resolve, reject) => {
			// 筛选框的top值
			setTimeout(() => {
				wx.createSelectorQuery().select(id).fields({
					dataset: true,
					size: true,
					rect: true
				}, function(res) {
					_this[name] = res
					resolve(true);
				}).exec();
			}, 500);
		});
	};
	// 获取店铺列表
	const getShopList = () => {
		var hot_key = wx.getStorageSync('hot_key');
		var param = {
			lng: _this.delivery_address.lng,
			lat: _this.delivery_address.lat,
			page: _this.pageIndex,
			cat_url: _this.options.cat_url ? _this.options.cat_url : _this.filterParam.cat.cat_url,
			sort_url: _this.filterParam.sort.sort_url,
			type_url: _this.filterParam.dispatch.type_url
		};
	
		if (hot_key) {
			param.hot_keywords = hot_key.key_list;
			param.hot_keywords_time = hot_key.time;
		}
	
		common.post('Shop_new&a=ajax_list', param, data => {
			wx.hideLoading();
			console.log('店铺列表', data);
	
			if (data) {
				data.store_list.map(item => {
					item.showIndex = false;
					return item;
				});
	
				if (_this.pageIndex == 1) {
					_this.shopList = [];
				}
	
				_this.shopList = _this.shopList.concat(data.store_list)
				_this.pageLoading = data.has_more == true
				_this.pageIndex = data.has_more == true ? _this.pageIndex + 1 : _this.pageIndex
				_this.reachBottom = false
			}
		});
		
		if (_this.shop_type.category_list.length == 0) {
			let shop_type = uni.getStorageSync('shop_type')
			console.log('shop_type', shop_type);
			if (shop_type) {
				_this.shop_type = shop_type
				// 设置筛选框的值
				getFilterParam(_this.shop_type);
				getNodeInfo('#header', 'headerRect');
			} else {
				// 获取店铺分类列表
				getShoptypeList();
			}
		}
	};

	// 获取店铺分类列表
	const getShoptypeList = () => {
		common.post('Shop_new&a=getCategoryType', {}, data => {
			if (data) {
				data.category_list.map(item => {
					var obj = {
						cat_name: item.cat_name,
						cat_url: item.cat_url,
						active: false
					};
	
					if (item.son_list) {
						item.son_list.map((i, index) => {
							i.active = false;
							return i;
						});
						item.son_list.unshift(obj);
					} else {
						item.son_list = [obj];
					}
	
					return item;
				}); 
				// 根据页面跳转带来的cat_url获取筛选参数
				getFilterParam(data);
	
				_this.shop_type = data
	
				wx.setStorage({
					key: 'shop_type',
					data: data
				});
				getNodeInfo('#header', 'headerRect');
			}
		});
	}; 
	// 获取筛选参数
	const getFilterParam = shopType => {
		
		var arr = shopType.category_list;
		var cat = arr[0]
		var cat_url = _this.options.cat_url ?  _this.options.cat_url : 'all';
		var category_fir_index = 0
		
		console.log('shopType.category_list', shopType.category_list);
	
		for (var i = 0; i < arr.length; i++) {
			if (arr[i].cat_url == cat_url) {
				cat = arr[i];
				arr[i].son_list[0].active = true
				category_fir_index = i
				break;
			} else if (arr[i].son_list) {
				var arr2 = arr[i].son_list;
	
				for (var j = 0; j < arr2.length; j++) {
					if (arr2[j].cat_url == cat_url) {
						cat = arr2[j];
						arr2[j].active = true
						category_fir_index = i
						break;
					}
				}
			}
		}
	
		var filterParam = {
			cat: cat,
			// 分类
			sort: shopType.sort_list[0],
			// 排序
			dispatch: {
				['type_url']: '',
				['special_url']: ''
			} // 配送类型
	
		};
		
		console.log('分类筛选框', arr, filterParam)
		_this.filterParam = filterParam
		if (_this.options.cat_url) {
			_this.category_fir_index = category_fir_index
			_this.shop_type.category_list = arr
			_this.options = {};
			wx.setNavigationBarTitle({
				title: decodeURIComponent(filterParam.cat.cat_name)
			});
			_this.$forceUpdate()
		}
	};
	// 获取购物车数量
	const getCartNum = () => {
		if (!app.globalData.is_login) {
			return
		}
		common.post('Cart&a=productNum', {}, function(data){
			console.log('购物车商品总数', data)
			_this.totalNum = data.total_num
		})
		common.post('Cart&a=storeNum', {}, function(data){
			console.log('购物车各店铺商品数量', data)
			_this.store_num = data
		})
	}
	// 微信h5分享
	const setWxShare = () => {
		common.getConfig(function(data){
			let pageLink = `${common.requestDomain}packapp/${common.wxapp_type}/pages/shop_new/shopType/shopType`;
			let desc = common.changeTxt('点击立马查看更多店铺与优惠')
			if (_this.options.cat_url) {
				pageLink = pageLink + `?cat_url=${_this.options.cat_url}&title=${ encodeURIComponent(_this.options.title) }`
				desc = _this.options.cat_url == 'all' ? desc : common.changeTxt('点击立马查看「 X1 」的更多店铺与优惠', {X1: _this.options.title})
			}
			pageLink = common.addShareParam(pageLink)
			let shareWxLink = pageLink;
			var shareData = {
				title: data.config.shop_wxapp_share_title,
				desc: desc,
				sendFriendLink: shareWxLink,
				share_img: data.config.shop_wxapp_share_img
			};
			common.setWxShare(shareData);
		})
	};
</script>
<style>
	@import "../styles/weui.css";
	@import "../styles/skyvow.css";
	@import '../take-out/takeout.scss';

	.border-t {
		position: relative;
	}

	.border-b::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		height: 1rpx;
		width: 100%;
		background: #e5e5e5;
		transform: scaleY(0.5);
	}

	.border-t::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		height: 1rpx;
		width: 100%;
		background: #e5e5e5;
		transform: scaleY(0.5);
	}

	.pb5 {
		padding-bottom: 5px;
	}

	.pt5 {
		padding-top: 5px;
	}

	.pt8 {
		padding-top: 8px;
	}

	.mb5 {
		margin-bottom: 5px;
	}

	.mb10 {
		margin-bottom: 10px
	}

	.mb15 {
		margin-bottom: 15px;
	}

	.po-re {
		position: relative;
	}

	.clearfix {
		overflow: auto;
		_height: 1%;
	}


	page {
		overflow: hidden;
	}

	.wrapper {
		height: 100%;
		box-sizing: border-box;
	}

	.list {
		background: #fff;
	}

	.header {
		background: #06c1ae;
		color: #fff;
		padding: 0 10px;
	}

	.header .address-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 90rpx;
		padding: 10rpx 0;
		overflow: hidden;
	}

	.header .address-box .address {
		height: 80rpx;
		line-height: 80rpx;
	}

	.header .address-box .address text {
		margin-right: 5rpx;
		font-size: 16px
	}


	.search-wrapper {
		background: #06c1ae;
		padding: 20rpx 10px;
		position: relative;
	}

	.search-wrapper .search-box {
		background: #fff;
		border-radius: 5rpx;
		font-size: 15px;
		color: #999;
		display: flex;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
		height: 70rpx;
	}

	.search-wrapper .search-box .icon-sousuo {
		margin-right: 10rpx;
		color: #999;
		font-size: 15px;
	}

	.search-wrapper.fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}

	.search-wrapper.fixed .search-box {
		height: 70rpx;
	}


	.search-wrapper .scan {
		height: 80rpx;
		width: 80rpx;
		border-radius: 50%;
		font-size: 20rpx;
		text-align: center;
		padding: 0 5rpx;
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		color: #777;
	}

	.search-wrapper .scan .icon-scan {
		display: inline-block;
		font-size: 36rpx;
		line-height: 46rpx;
	}

	.search-wrapper .scan view {
		margin-top: -8rpx;
	}


	.shop-list .title {
		padding: 60rpx 10px 0;
		margin: 0;
		font-size: 20px;
	}

	.filter {
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 15px;
		color: #999;
		padding: 0 10px;
		background: #fff;
		position: relative;
	}

	.filter .type-item {
		height: 90rpx;
		line-height: 90rpx;
	}

	.filter .iconfont {
		margin-left: 10rpx;
	}

	.filter .active {
		color: #333;
	}
	
	.filter .dispatch {
		display: flex;
		align-items: center;
	}
	
	.filter .dispatch .num-box {
		display: flex;
		align-items: center;
		width: 16px;
		height: 16px;
		margin-left: 2px;
	}
	
	.filter .dispatch .num-box .left {
		width: 100%;
		height: 100%;
		background: red;
		opacity: 0.12;
		border-radius: 50%;
	}
	.filter .dispatch .num-box .right {
		width: 100%;
		height: 100%;
		color: red;
		text-align: center;
		font-size: 12px;
		font-weight: normal;
		line-height: normal;
		margin-left: -16px;
	}

	.shop-list .item {
		position: relative;
	}

	.shop-list .item:last-child.border-b::after {
		height: 0;
	}
	.shopCart {
		position: fixed;
		right: 10px;
		bottom: 20px;
		width: 45px;
		height: 45px;
		background: #fff;
		color: #06c1ae;
		box-shadow: 0px 0px 8px 1px #ddd;
		border-radius: 50%;
		text-align: center;
		line-height: 45px;
		z-index: 10;
	}

	.shopCart .iconfont {
		font-size: 28px;
	}

	.shopCart.hover {
		background: rgb(247, 245, 245)
	}

	.shopCart .num {
		position: absolute;
		right: -3px;
		top: -5px;
		background: linear-gradient(to right, #ff9867, #ff5f45);
		width: 18px;
		height: 18px;
		color: #fff;
		text-align: center;
		line-height: 18px;
		border-radius: 50%;
		font-size: 14px;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		height: 0;
		z-index: 99;
	}

	.mask.active {
		height: 100%;
	}

	.mask-content {
		background: #fff;
		font-size: 14px;
		transform: translateY(-100%);
		transition: all .5s;
	}

	.mask-content.active {
		transform: translateY(0);
	}

	.all-type {
		display: flex;
		height: 270px;
		overflow: hidden;
		box-sizing: border-box;
	}

	.all-type .nav-box {
		width: 45%;
	}

	.all-type .nav {
		padding: 0 10px 15px;
	}

	.all-type .nav .icon-jiantou {
		font-size: 15px;
	}

	.all-type .content-box {
		background: #f1f5f5;
	}

	.all-type .content {
		padding: 0 30px 15px;
	}

	.all-type .nav view,
	.all-type .content view,
	.sort view {
		height: 40px;
		line-height: 40px;
	}

	.all-type .active {
		color: #06c1ae;
	}

	.sort {
		padding: 0 10px 10px;
	}

	.sort view {
		display: flex;
		justify-content: space-between;
	}


	/* 定位按钮 */
	.locationBtn button {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: #06c1ae;
		color: #fff;
		font-size: 16px;
	}

	.tip {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		color: #666;
		padding: 10px 0;
		background: #f8f8f8;
	}

	.tip image {
		width: 20px;
		height: 20px;
		margin-right: 5px;
	}
	
.sort-type-box{
	padding-top: 20rpx;
}
.sort-type-box:last-child{
	padding-top: 0;
}

.sort-type-title{
	font-size: 12px;
	color: #999;
	padding: 0 20rpx;
}

.sort-type-list{
	display: flex;
	flex-wrap: wrap;
	padding: 20rpx 0 20rpx 20rpx;
}

.sort-type-list .item{
	height: 36px;
	margin-right: 20rpx;
	margin-bottom: 20rpx;
	position: relative;
	width: -webkit-calc(33.3333% - 20rpx);
	width: calc(33.3333% - 20rpx);
}

.sort-type-list .item .left{
	display: inline-block;
	width: 100%;
	height: 100%;
	background: #bbb;
	opacity: 0.12;
	border-radius: 4rpx;
}

.sort-type-list .item .right{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: inline-block;
	color: #666;
	text-align: center;
	line-height: 36px;
	font-size: 12px;
}
.sort-btn-box{
	border-top: 1px solid #f2f2f2;
	display: flex;
}
.sort-btn-box .btn{
	width: 50%;
	padding: 20rpx 0;
	text-align: center;
}
.sort-btn-box .btn.left{
	color: #999;
}
.sort-btn-box .btn.right{
	color: #fff;
	background: rgb(6, 193, 174);
}

.sort-btn-box .resetFilter, .sort-btn-box .confirmFilter{
	font-size:16px;
}
.sort-btn-box .confirmFilter .num{
	font-size:12px;
}
</style>
